<template>
  <div class="ToolboxZone">
    <el-button text @click="initToolBox()">工具箱222</el-button>
    <div class="Toolbox">
      <el-space wrap=true>
        <div v-for="i in toolList_data" :key=i.id>
          <el-button text @click="onSelTool(i.id)">{{ i.name }}</el-button>
        </div>
      </el-space>
    </div>
  </div>
</template>


<script>
import GlobalConst from '../../script/canvas/common/globalConst.js'
var global = GlobalConst.GlobalConst;

var onSelTool = function (toolTypeID) {
  window.mainctl.setTool(toolTypeID);
}

var initBaseUnitTool = function (toolArr) {
  {
    let id = global.BaseUnitPolyline << 16;
    let name = "polyline";
    let yuansu = { id, name };
    toolArr.push(yuansu);
  }

  {
    let id = global.BaseUnitCircle << 16;
    let name = "circle";
    let yuansu = { id, name };
    toolArr.push(yuansu);
  }

  {
    let id = global.BaseUnitRectangle << 16;
    let name = "rectangle";
    let yuansu = { id, name };
    toolArr.push(yuansu);
  }

  {
    let id = global.BaseUnitPolygon << 16;
    let name = "polygon";
    let yuansu = { id, name };
    toolArr.push(yuansu);
  }
}

var initToolBox = function () {
  t = 0;
  var xhr = new XMLHttpRequest();
  const that = this;
  var parsingDevTypeXML = function (rspXMLData) {
    console.log("longjinhua:" + rspXMLData);
    that.toolList_data = [];
    var toolArr = [];
    that.initBaseUnitTool(toolArr);
    var devDef = rspXMLData.getElementsByTagName("CYGDevTypeDef");
    for (var i = 0; i < devDef.length; i++) {
      var maindevtype = devDef[i].getElementsByTagName("maindevtype");
      for (var n = 0; n < maindevtype.length; n++) {
        var subdevtype = maindevtype[n].getElementsByTagName("subdevtype");
        for (var m = 0; m < subdevtype.length; m++) {
          var t = subdevtype[m];
          var id = t.getAttribute("id");
          var name = t.getAttribute("name");
          console.log("id=" + id, "name=" + name);
          var yuansu = { id, name };
          toolArr.push(yuansu);
        }
      }
    }
    that.toolList_data = toolArr;
  }
}

  export default {
    name: 'ToolboxZone',
    props: {
      ButtonCount: Number,
      toolList_prop: {
        type: Array
      }
    },
    data() {
      return {
        toolList_data: []
      };
    },
    mounted() {
      this.toolList_data = this.toolList_prop;
    },
    watch: {
      data: {
        immediate: true,
        handel(val) {
          this.toolList_data = val;
        }
      }
    },
    created() {
    },
    computed: {
    },
    methods: {
      onSelTool,
      initBaseUnitTool,
      initToolBox
    }
  };

</script>

<style scoped>
/* 左侧样式 */
.ToolboxZone {
  top: 2px;
  /* 距离上面50像素 */
  left: 0px;
  bottom: 200px;
  /* overflow-y: auto; */
  /* 当内容过多时y轴出现滚动条 */
  background-color: #5a2929;
}

.Toolbox {
  position: relative;
  /* width: 200px; */
  top: 8px;
  /* 距离上面50像素 */
  left: 0px;
  bottom: 0px;
  /* overflow-y: auto; */
  /* 当内容过多时y轴出现滚动条 */
  background-color: #2d3a4b;
}
</style>




